<template>
  <div class="login">
    <div class="logo">
      <img :src="resources.logo" alt="" />
    </div>
    <div class="login-form" v-show="!isShow">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="loginForm.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :clearable="true"
          />
          <van-field
            v-model="loginForm.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :clearable="true"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" @click="login">
            登陆
          </van-button>
          <div class="other">
            <span @click="toggle">注册账号</span>
            <span @click="$router.push('/forget')">忘记密码</span>
          </div>
        </div>
      </van-form>
    </div>
    <div class="register-form" v-show="isShow">
      <van-form ref="registerRef">
        <van-cell-group inset>
          <van-field
            v-model="registerForm.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :clearable="true"
            :rules="[
              { required: true, message: '请填写用户名' },
              {
                validator: this.validateUsername,
                message: '只能输入数字、字母或汉字',
              },
            ]"
          />
          <van-field
            v-model="registerForm.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :clearable="true"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="registerForm.nickname"
            name="nickname"
            label="昵称"
            placeholder="昵称"
            :clearable="true"
            :rules="[{ required: true, message: '请填写昵称' }]"
          />
          <van-field
            v-model="registerForm.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :clearable="true"
            :rules="[
              { required: true, message: '请填写手机号' },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号',
              },
            ]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" @click="register"
            >注册</van-button
          >
          <div class="other">
            <span @click="toggle">去登陆</span>
          </div>
        </div>
      </van-form>
    </div>
    <div class="tip" @click="$router.push('/home')">暂不登录</div>
  </div>
</template>

<script>
import { login, register } from "@/api/mobile/user";
import userModule from "@/utils/userInfo";
import { initWebSocket, sendMessage } from "@/utils/websocket";
import type from "postcss-pxtorem/lib/type";
import { Toast } from "vant";
import { getList } from "@/api/mobile/resources";
export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      registerForm: {
        username: "",
        password: "",
        nickname: "",
        phone: "",
      },
      isShow: false,
      resources: {},
    };
  },
  created() {
    this.getResources();
  },
  methods: {
    async getResources() {
      const res = await getList();
      this.resources = res.data;
    },
    // 登陆
    async login() {
      if (!this.loginForm.username && !this.loginForm.password) {
        Toast.fail("用户名和密码不能为空");
        return;
      }
      this.loginForm.username = this.loginForm.username.trim();
      this.loginForm.password = this.loginForm.password.trim();
      const res = await login(this.loginForm);
      const { token, ...data } = res.data;
      userModule.setUser(data);
      localStorage.setItem("u_t", token);
      // 发送消息
      sendMessage({
        type: "LOGIN",
        token: token,
      });
      this.$router.push("/home");
    },
    // 注册
    async register() {
      await this.$refs.registerRef.validate();
      const res = await register(this.registerForm);
      this.toggle();
    },
    // 自定义用户名校验
    validateUsername(val) {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
      return reg.test(val);
    },
    // 切换
    toggle() {
      this.loginForm = {
        username: "",
        password: "",
      };
      this.registerForm = {
        username: "",
        password: "",
        nickname: "",
        phone: "",
      };
      this.$refs.registerRef.resetValidation();
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  height: 100vh;
  .logo {
    width: 80px;
    height: 80px;
    box-shadow: 0 0 4px #ccc;
    border-radius: 14px;
    img {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }
  .login-form,
  .register-form {
    margin-top: 40px;
    .other {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      padding: 0 10px;
      font-size: 15px;
    }
  }
  .tip {
    position: absolute;
    bottom: 20px;
    font-size: 14px;
    color: #999;
  }
}
</style>